<template>
	<div class="layout-padding">
		<div class="fenxi">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="部门" name="departmentId"></el-tab-pane>
				<el-tab-pane label="区域" name="areaId"></el-tab-pane>
				<el-tab-pane label="分项" name="modelType"></el-tab-pane>
				<el-tab-pane label="支路" name="branchingId"></el-tab-pane>
				<el-tab-pane label="设备" name="equipment"></el-tab-pane>
			</el-tabs>
			<div class="content">
				<div class="level">
					<div class="level-l">
						<div class="head" v-if="activeName != 'modelType' && activeName != 'branchingId'">能耗分类</div>
						<div class="shui-dian" v-if="activeName != 'modelType' && activeName != 'branchingId'">
							<span v-for="(item, index) in sortData" :key="index" :class="[sdIndex == item.value ? 'active' : '']" @click="queryData(item)">{{
								item.label
							}}</span>
						</div>

						<div class="head">统计对象</div>
						<div :class="[activeName !== 'modelType' && activeName !== 'branchingId' ? 'dept2' : 'dept']">
							<el-scrollbar class="data-scrollbar">
								<el-input placeholder="输入关键字进行过滤" v-model="deptName" style="margin-bottom: 10px"> </el-input>
								<el-tree
									default-expand-all
									ref="deptTree"
									node-key="id"
									placeholder="请选择 上级部门"
									:data="treeData"
									:props="treeDataProps"
									:current-node-key="currentNodeKey"
									:filter-node-method="filterNode"
									:highlight-current="true"
									:expand-on-click-node="false"
									@node-click="getNodeData"
								></el-tree>
							</el-scrollbar>
						</div>
					</div>
					<div class="level-r">
						<el-scrollbar class="data-scrollbar">
							<div class="condition">
								<div class="time">
									<div class="time-tab huanbi" style="margin-left: 0">
										<div :class="[compareType == 0 ? 'active' : '']" @click="queryData3(0)">能耗</div>
										<div :class="[compareType == 1 ? 'active' : '']" @click="queryData3(1)">同比</div>
										<div :class="[compareType == 2 ? 'active' : '']" @click="queryData3(2)">环比</div>
									</div>
									<div class="select-con">
										<div>统计周期:</div>
										<el-select v-if="compareType == 0" v-model="dateType" placeholder="请选择" clearable @change="dateTypeChange">
											<el-option label="日周期" value="daterange"></el-option>
											<el-option label="月周期" value="monthrange"></el-option>
											<el-option label="年周期" value="yearrange"></el-option>
										</el-select>
										<el-select v-else v-model="dateType2" placeholder="请选择" clearable @change="dateTypeChange2">
											<el-option label="日周期" value="date" :disabled="dateDisabled"></el-option>
											<el-option label="月周期" value="month" :disabled="dateDisabled"></el-option>
											<el-option label="年周期" value="year"></el-option>
										</el-select>
									</div>
									<div class="time-picker">
										<div v-if="compareType == 0">
											<div v-if="dateType == 'daterange' || dateType == 'monthrange'">
												<el-date-picker
													v-model="value1"
													:type="dateType"
													placeholder="请选择"
													:value-format="dateFormat"
													:disabled-date="pickerOptions1"
													@change="changeDate"
												/>
											</div>
											<div v-else>
												<yearPicker
													style="width: 250px"
													ref="statisticPicker"
													:labelWidth="50"
													labelText=""
													:initYear="dateValue"
													:showStartYear="showStartYear"
													:showEndYear="showEndYear"
													@updateTimeRange="updateStatisticYear"
												/>
											</div>
										</div>
										<div v-else>
											<el-date-picker
												v-model="value2"
												:type="dateType2"
												placeholder="请选择"
												:value-format="dateFormat2"
												:disabled-date="pickerOptions1"
												@change="changeDate2"
											/>
										</div>
									</div>
									<div class="time-tab huanbi" v-show="yearTabShow">
										<div :class="[yearTab == 'date' ? 'active' : '']" @click="queryYearData('date')">今日</div>
										<div :class="[yearTab == 'month' ? 'active' : '']" @click="queryYearData('month')">本月</div>
										<div :class="[yearTab == 'year' ? 'active' : '']" @click="queryYearData('year')">本年</div>
									</div>

									<div>
										<!-- <el-button class="filter-item" plain type="primary" icon="el-icon-download" @click="exportExcel">导出 </el-button> -->
									</div>
								</div>
							</div>
							<div class="data-area">
								<div class="item">
									<div class="head">总能耗量</div>
									<div class="head-num color-1">
										{{ sumPower }}<font>{{ alleywayUnit }}</font>
									</div>
								</div>
								<div class="item" v-show="compareType != 0">
									<div class="head" v-if="compareType == 1">同期能耗量</div>
									<div class="head" v-if="compareType == 2">上期能耗量</div>
									<div class="head-num color-2">
										{{ lastSumPower }}<font>{{ alleywayUnit }}</font>
									</div>
									<!-- <div class="head-num color-2" v-if="compareType == 'huanbi'">
                  {{ nenghaoObj.prev }}<font>Kw.h</font>
                </div> -->
								</div>
								<div class="item" v-show="compareType != 0">
									<div class="head" v-if="compareType == 1">同比增长率</div>
									<div class="head" v-if="compareType == 2">环比增长率</div>
									<div class="head-num color-3">{{ growthRate }}<font>%</font></div>
								</div>
							</div>
							<div class="level-content">
								<span class="unit">{{ alleywayUnit }}</span>
								<div id="data-chart" ref="dataChart"></div>
								<el-table :data="tableData" stripe style="width: 100%" class="data-table">
									<el-table-column align="center" prop="timeValue" label="时间" />
									<el-table-column align="center" prop="totalValue" label="用能量" />
								</el-table>
							</div>
						</el-scrollbar>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from '/@/utils/chart';
import { getDateByType } from '/@/utils/util';

import yearPicker from '/@/components/YearPick/yearPick.vue';
import { getPowerSubitem, deptConfigData, deptPowerAnalyse, deptPowerAnalyseByChart } from '/@/api/consumptionmanagement/energyanalysis/tong';

export default {
	components: {
		yearPicker,
	},
	data() {
		return {
			activeName: 'areaId',
			dateType: 'daterange',
			dateType2: 'date',
			yearTab: 'date',
			sdIndex: 1,
			value1: '',
			value2: '',
			dateDisabled: false, // 日 月  没有同比
			startDate: '',
			endDate: '',
			deptValue: '',
			treeData: [],
			treeDataProps: {
				label: 'name',
				value: 'id',
			},
			dateFormat: '',
			dateFormat2: '',
			alleywayUnit: 'kw.h',
			sortData: [],
			itemData: [],
			tableData: [],
			energyType: '01',
			fileKey: 'areaId',
			fileValue: '',
			compareType: '0',
			flowChartId: '',
			sumPower: null,
			lastSumPower: null,
			highlight: true,
			growthRate: '',
			fenxiangIndex: 1,
			deptName: '',
			currentNodeKey: '',
			deptUnitNo: '',
			legendType: 1,
			showStartYear: new Date().getFullYear(),
			showEndYear: new Date().getFullYear(),
			dateValue: { startYear: 2010, endYear: new Date().getFullYear() },
			yearTabShow: true,
			isShow: true,
		};
	},
	watch: {
		deptValue(val) {
			this.$refs.tree.filter(val);
		},
		deptName(val) {
			this.$refs.deptTree.filter(val);
		},
		dateType: {
			handler(val, oldVal) {
				if (val == 'yearrange') {
					this.dateFormat = 'YYYY';
				} else if (val == 'monthrange') {
					this.dateFormat = 'YYYY-MM';
				} else {
					this.dateFormat = 'YYYY-MM-DD';
				}
			},
			immediate: true,
		},
		dateType2: {
			handler(val, oldVal) {
				if (val == 'year') {
					this.dateFormat2 = 'YYYY';
				} else if (val == 'month') {
					this.dateFormat2 = 'YYYY-MM';
				} else {
					this.dateFormat2 = 'YYYY-MM-DD';
				}
			},
			immediate: true,
		},
	},
	created() {
		let dateObj = this.getNowDate();
		this.value1 = [dateObj.date, dateObj.date];
		getPowerSubitem().then((res) => {
			this.sortData = res.data;
		});
	},
	mounted() {
		this.getDeptConfigData(1);
	},
	methods: {
		pickerOptions1(time) {
			return time.getTime() > Date.now();
		}, 
		getDeptConfigData(type) {
			let str;
			if (this.fileKey == 'departmentId') {
				str = 'dimdept';
			} else if (this.fileKey == 'areaId') {
				str = 'dimarea';
			} else if (this.fileKey == 'modelType') {
				str = 'dimSubitem';
			} else if (this.fileKey == 'branchingId') {
				str = 'dimBranch';
			} else if (this.fileKey == 'equipment') {
				str = 'dimKeq';
			}
			deptConfigData(type, str).then((res) => {
				this.treeData = res.data;
				if (!this.validatenull(this.treeData)) {
					this.currentNodeKey = this.treeData[0].id;
					this.flowChartId = this.treeData[0].id;

					this.$nextTick(() => {
						this.$refs.deptTree.setCurrentKey(this.currentNodeKey);
						this.getDeptPowerAnalyse(this.flowChartId, this.value1[0], this.value1[1]);
						this.getDeptPowerAnalyseByChart(this.flowChartId, this.value1[0], this.value1[1]);
					});
				} else {
					this.sumPower = '-';
					this.lastSumPower = '-';
					this.growthRate = '-';
					this.initChart([], [], [], []);
					this.tableData = [];
				}
			});
		},
		getNodeData(data, node) {
			this.setQuery();
			this.flowChartId = data.id;

			this.getDeptPowerAnalyse(this.flowChartId, this.value1[0], this.value1[1]);
			this.getDeptPowerAnalyseByChart(this.flowChartId, this.value1[0], this.value1[1]);
		},
		exportExcel() {
			this.$store.commit('openIframe', [
				true,
				`/report/jmreport/view/f5f275b5e28b45256ef24587ec792f0c?token＝${this.access_token}&date=${this.value1}&energyType=${this.energyType}&fileKey=${this.fileKey}&fileValue=${this.fileValue}&compareType=${this.compareType}`,
			]);
		},
		closeIframe() {
			this.$store.commit('openIframe', [false, '']);
		},
		handleClick(tab, event) {
			this.setQuery();
			this.fileKey = tab.props.name;
			if (this.fileKey == 'departmentId') {
				this.getDeptConfigData(1);
			} else if (this.fileKey == 'areaId') {
				this.getDeptConfigData(1);
			} else if (this.fileKey == 'modelType') {
				this.getDeptConfigData();
			} else if (this.fileKey == 'branchingId') {
				this.getDeptConfigData();
			} else if (this.fileKey == 'equipment') {
				this.getDeptConfigData(1);
			}
		},
		initChart(xData, yData1, yData2, legends) {
			let _this = this;
			//检测是否已经存在echarts实例，如果不存在，则不再去初始化
			let myChart = echarts.getInstanceByDom(this.$refs.dataChart);
			//如果为空 则正常进行渲染 反之 不再进行初始化
			if (myChart == null) {
				myChart = echarts.init(this.$refs.dataChart);
			}
			myChart.setOption({
				grid: {
					left: 100,
					top: 50,
					bottom: 30,
					right: 10,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
					},
					textStyle: {
						color: '#333',
						fontSize: 14,
					},
				},
				toolbox: {
					show: true,
					feature: {
						magicType: { type: ['line', 'bar'] },
						restore: {},
						saveAsImage: {},
					},
				},
				legend: {
					show: true,
					top: '3%',
				},
				xAxis: {
					type: 'category',
					data: xData,
					axisLabel: {
						show: true,
						color: '#999',
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#0ba2b6',
						},
					},
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						color: '#999',
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#0ba2b6',
						},
					},
					splitLine: {
						lineStyle: {
							color: '#345787',
							type: 'dashed', // y轴分割线类型
						},
					},
				},
				series: [
					{
						type: 'bar',
						name: legends[0],
						barWidth: 10,
						itemStyle: {
							color: '#0ba2b6',
						},
						data: yData1,
						markPoint: {
							data: [
								{ type: 'max', name: 'Max' },
								{ type: 'min', name: 'Min' },
							],
						},
					},
					{
						type: 'bar',
						name: legends[1],
						barWidth: 10,
						tooltip: {
							show: this.isShow,
						},
						itemStyle: {
							color: '#91cc75',
						},
						data: yData2,
						markPoint: {
							data: [
								{ type: 'max', name: 'Max' },
								{ type: 'min', name: 'Min' },
							],
						},
					},
				],
			});
		},
		filterNode(value, data) {
			if (!value) return true;
			return data.name.includes(value);
		},
		// 切换统计周期，同比没有日周期和月周期
		dateTypeChange(val) {
			if (this.compareType == '1' && (val == 'daterange' || val == 'monthrange')) {
				return;
			}
			this.dateType = val;
			this.yearTab = '';
			this.legendType = 1;
			if (val == 'yearrange') {
				this.value1 = this.getNowDate().year;
				this.getDeptPowerAnalyse(this.flowChartId, this.value1, this.value1);
				this.getDeptPowerAnalyseByChart(this.flowChartId, this.value1, this.value1);
			} else {
				if (val == 'monthrange') {
					this.value1 = [this.getNowDate().month, this.getNowDate().month];
				} else {
					this.value1 = [this.getNowDate().date, this.getNowDate().date];
				}
				this.getDeptPowerAnalyse(this.flowChartId, this.value1[0], this.value1[1]);
				this.getDeptPowerAnalyseByChart(this.flowChartId, this.value1[0], this.value1[1]);
			}
		},
		// 切换统计周期，同比没有日周期和月周期
		dateTypeChange2(val) {
			if (this.compareType == '1' && (val == 'daterange' || val == 'monthrange')) {
				return;
			}
			this.dateType2 = val;
			this.yearTab = '';
			this.legendType = 1;
			if (val == 'year') {
				this.value2 = this.getNowDate().year;
			} else if (val == 'month') {
				this.value2 = this.getNowDate().month;
			} else {
				this.value2 = this.getNowDate().date;
			}
			this.getDeptPowerAnalyse(this.flowChartId, this.value2, this.value2);
			this.getDeptPowerAnalyseByChart(this.flowChartId, this.value2, this.value2);
		},
		changeDate(val) {
			this.value1 = val;
			this.yearTab = '';
			if (this.dateType == 'year') {
				this.value1 = [val, val];
			} else if (this.dateType == 'monthrange') {
				let maxRange = 24 * 30 * 24 * 60 * 60 * 1000; // 24个月的毫秒数
				let range = new Date(this.value1[1]).getTime() - new Date(this.value1[0]).getTime();
				if (range > maxRange) {
					this.$message.error('选定的月份范围不能超过两年！');
					// this.value1 = [];
					return;
				}
			} else {
				let maxRange = 3 * 30 * 24 * 60 * 60 * 1000; // 三个月的毫秒数
				let range = new Date(this.value1[1]).getTime() - new Date(this.value1[0]).getTime();
				if (range > maxRange) {
					this.$message.error('选定的日期范围不能超过三个月！');
					// this.value1 = [];
					return;
				}
			}
			this.getDeptPowerAnalyse(this.flowChartId, this.value1[0], this.value1[1]);
			this.getDeptPowerAnalyseByChart(this.flowChartId, this.value1[0], this.value1[1]);
		},
		changeDate2(val) {
			this.value2 = val;
			this.yearTab = '';
			this.getDeptPowerAnalyse(this.flowChartId, this.value2, this.value2);
			this.getDeptPowerAnalyseByChart(this.flowChartId, this.value2, this.value2);
		},
		updateStatisticYear(obj) {
			this.getDeptPowerAnalyse(this.flowChartId, obj.startYear, obj.endYear);
			this.getDeptPowerAnalyseByChart(this.flowChartId, obj.startYear, obj.endYear);
		},
		queryData(item) {
			this.sdIndex = item.value;
			if (item.value == 1) {
				this.alleywayUnit = 'kwh';
			} else if (item.value == 2) {
				this.alleywayUnit = 't';
			} else if (item.value == 3) {
				this.alleywayUnit = 'm³';
			}
			this.getDeptConfigData(item.value);
		},
		queryYearData(type) {
			this.yearTab = type;
			this.legendType = 2;
			let dateObj = this.getNowDate();
			let time;
			if (type == 'date') {
				time = dateObj.date;
			} else if (type == 'month') {
				time = dateObj.month;
			} else {
				time = dateObj.year;
			}

			this.getDeptPowerAnalyse(this.flowChartId, time, time);
			this.getDeptPowerAnalyseByChart(this.flowChartId, time, time);
		},
		queryData3(type) {
			this.compareType = type;
			this.yearTab = '';
			if (type == 0) {
				this.yearTabShow = true;
				this.dateType = 'daterange';
				this.dateDisabled = false;
				this.value1 = [this.getNowDate().date, this.getNowDate().date];
				this.getDeptPowerAnalyse(this.flowChartId, this.value1[0], this.value1[1]);
				this.getDeptPowerAnalyseByChart(this.flowChartId, this.value1[0], this.value1[1]);
			} else {
				this.yearTabShow = false;

				if (type == 1) {
					this.dateType2 = 'year';
					this.value2 = this.getNowDate().year;
					this.dateDisabled = true;
				} else {
					this.dateDisabled = false;
					this.dateType2 = 'date';
					this.value2 = this.getNowDate().date;
				}
				this.getDeptPowerAnalyse(this.flowChartId, this.value2, this.value2);
				this.getDeptPowerAnalyseByChart(this.flowChartId, this.value2, this.value2);
			}
		},
		getLegends() {
			let arr = [];
			if (this.compareType == 0) {
				if (this.dateType == 'daterange') {
					arr = ['今日', '昨日'];
				} else if (this.dateType == 'monthrange') {
					arr = ['本月', '上月'];
				} else {
					arr = ['本年', '上年'];
				}
				arr = ['', ''];
				this.isShow = false;
			} else {
				if (this.yearTab != '') {
					if (this.yearTab == 'date') {
						arr = ['今日', '昨日'];
					} else if (this.yearTab == 'month') {
						arr = ['本月', '上月'];
					} else {
						arr = ['本年', '上年'];
					}
				} else {
					if (this.dateType2 == 'date') {
						arr = ['今日', '昨日'];
					} else if (this.dateType2 == 'month') {
						arr = ['本月', '上月'];
					} else {
						arr = ['本年', '上年'];
					}
				}

				this.isShow = true;
			}

			return arr;
		},
		getDeptPowerAnalyse(unitNo, startDate, endDate) {
			let str;
			if (this.fileKey == 'departmentId') {
				str = 'powerData';
			} else if (this.fileKey == 'areaId') {
				str = 'powerAreaData';
			} else if (this.fileKey == 'modelType') {
				str = 'powerSubitemData';
			} else if (this.fileKey == 'branchingId') {
				str = 'powerBranchData';
			} else if (this.fileKey == 'equipment') {
				str = 'powerKeqData';
			}
			let params = {
				startDate: startDate,
				endDate: endDate,
				id: unitNo,
				energyType: this.sdIndex,
				compareType: this.compareType,
			};
			deptPowerAnalyse(params, str)
				.then((res) => {
					let data = res.data;
					this.sumPower = data.sumPower;
					this.lastSumPower = data.contrastPower;
					this.growthRate = data.growthRate;
				})
				.catch((err) => {});
		},
		getDeptPowerAnalyseByChart(unitNo, startDate, endDate) {
			let str;
			if (this.fileKey == 'departmentId') {
				str = 'powerLayer';
			} else if (this.fileKey == 'areaId') {
				str = 'powerAreaLayer';
			} else if (this.fileKey == 'modelType') {
				str = 'powerSubitemLayer';
			} else if (this.fileKey == 'branchingId') {
				str = 'powerBranchLayer';
			} else if (this.fileKey == 'equipment') {
				str = 'powerKeqLayer';
			}
			let params = {
				startDate: startDate,
				endDate: endDate,
				id: unitNo,
				energyType: this.sdIndex,
				compareType: this.compareType,
			};
			deptPowerAnalyseByChart(params, str)
				.then((res) => {
					let data = res.data;

					this.tableData = data.tableData;
					let legends = this.getLegends();

					if (data.chartData) {
						this.initChart(data.chartData.xData, data.chartData.yData1, data.chartData.yData2, legends);
					} else {
						this.initChart(legends, [], [], []);
					}
				})
				.catch((err) => {});
		},
		setQuery() {
			this.compareType = 0;
			this.dateType = 'daterange';
			this.dateType2 = 'date';
			this.dateFormat = 'YYYY-MM-DD';
			this.dateFormat2 = 'YYYY-MM-DD';
			this.yearTab = 'date';
			this.value1 = [this.getNowDate().date, this.getNowDate().date];
		},
		getNowDate() {
			let dateObj = getDateByType();
			let obj = {
				year: '',
				month: '',
				date: '',
			};
			obj.year = String(dateObj.year);
			obj.month = dateObj.year + '-' + dateObj.month;
			obj.date = dateObj.year + '-' + dateObj.month + '-' + dateObj.date;
			return obj;
		},
	},
};
</script>

<style lang="scss" scoped>
#data-chart {
	height: 400px;
}
.data-scrollbar {
	.area-item {
		margin: 10px 30px;
		.active {
			background: var(--el-color-primary);
			color: #fff;
		}
		span {
			display: inline-block;
			width: 320px;
			height: 36px;
			line-height: 36px;
			border-radius: 4px;
			font-size: 15px;
			text-align: center;
			transition: all 0.5s;
			cursor: pointer;
			border: 1px solid #efefef;
			&:hover {
				background: var(--el-color-primary);
				color: #fff;
			}
		}
	}
}
.fenxi {
	height: 100%;
	::v-deep .demo-tabs {
		background: #fff;
		padding: 10px;
		.el-tabs__header {
			margin-bottom: 0;
			display: inline-block;
		}
		.el-tabs__nav-wrap:after {
			background-color: initial;
		}
		.el-tabs__item {
			// height: 60px;
			// line-height: 60px;
			margin: 0 10px;
		}
	}
	.content {
		margin-top: 10px;
		height: calc(100% - 73px);
	}
	.level {
		display: flex;
		height: 100%;
		.level-l {
			width: 20%;
			background: #fff;
			margin-right: 6px;
		}
		.level-r {
			width: 80%;
			margin-left: 6px;
		}
		.shui-dian {
			border-top: 1px solid #eee;
			padding: 20px;
			// text-align: center;
			.active {
				background: var(--el-color-primary);
				color: #fff;
			}
			span {
				display: inline-block;
				width: 80px;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
				color: #333;
				margin-right: 10px;
				margin-top: 10px;
				text-align: center;
				transition: all 0.5s;
				cursor: pointer;
				border: 1px solid #efefef;
				&:hover {
					background: var(--el-color-primary);
					color: #fff;
				}
			}
		}
		.condition {
			height: 64px;
			border: 1px solid #efefef;
			background: #fff;
			display: flex;
			align-items: center;
			padding: 0 10px;
		}
		.data-area {
			display: flex;
			margin-top: 10px;
			justify-content: space-between;
			.item {
				width: calc((100% - 20px) / 3);
				height: 200px;
				background: #fff;
			}
			.head-num {
				border-top: 1px solid #efefef;
				padding-top: 40px;
				text-align: center;
				font-size: 36px;
				font-weight: bold;
				font {
					font-size: 18px;
					margin-left: 10px;
				}
			}
		}
		.level-content {
			position: relative;
			background: #fff;
			margin-top: 10px;
			padding: 0 10px;
			width: calc(100% - 20px);
			.data-table {
				margin-top: 30px;
			}
			.unit {
				position: absolute;
				left: 20px;
				top: 10px;
				font-size: 14px;
				font-weight: 700;
			}
		}
	}
}
.head {
	padding: 20px 10px;
	position: relative;
	font-size: 18px;
	padding-left: 25px;
	&:before {
		content: '';
		width: 2px;
		position: absolute;
		height: 24px;
		left: 10px;
		background: var(--el-color-primary);
	}
}
.select-con {
	display: flex;
	align-items: center;
	.el-select {
		margin-left: 5px;
		width: 90px;
	}
}
.time {
	display: flex;
	align-items: center;
	.time-tab {
		display: flex;
		align-items: center;
		border: 1px solid #eee;
		border-radius: 4px;
		margin-right: 50px;
		div {
			// margin: 0 15px;
			padding: 0 20px;
			height: 36px;
			transition: all 0.5s;
			line-height: 36px;
			text-align: center;
			cursor: pointer;
			&:not(:last-child) {
				border-right: 1px solid #eee;
			}
			&:hover {
				background: var(--el-color-primary);
				color: #fff;
			}
		}
		.active {
			background: var(--el-color-primary);
			color: #fff;
		}
	}
}
.huanbi {
	margin-left: 50px;
}
.dept,
.dept2,
.area {
	padding: 0 10px;
	border-top: 1px solid #eee;
	padding-top: 10px;
}

.dept {
	height: calc(100% - 67px);
}
.dept2 {
	height: calc(100% - 67px - 87px - 67px);
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
	background: #eaeaea;
}
.time-picker {
	margin-left: 10px;
	width: 370px;
}
</style>
